Web Development Chart.js এর মধ্যে Lazy Loading গাইড ও নোট

Lazy Loading এমন একটি প্রযুক্তি যা কেবলমাত্র প্রয়োজন অনুযায়ী ডেটা বা কম্পোনেন্ট লোড করে, এবং এটি কার্যকরভাবে ওয়েব পেজের পারফরম্যান্স উন্নত করতে সহায়তা করে। Chart.js-এ Lazy Loading প্রয়োগ করলে শুধুমাত্র প্রয়োজনীয় সময়েই চার্ট ডেটা লোড হয় এবং এটি পেজের প্রথম লোড টাইম কমিয়ে দেয়।

Chart.js এর মধ্যে Lazy Loading সাধারণত নিম্নলিখিত উদ্দেশ্যে ব্যবহৃত হয়:

1. ডেটা ফেচিং: ডেটা যদি সার্ভার থেকে আসতে থাকে, তবে প্রাথমিক লোডের সময় শুধু চার্টের কাঠামো লোড করা এবং ডেটা আসা শুরু হওয়ার সাথে সাথে চার্ট আপডেট করা।
2. চার্ট রেন্ডারিং: যখন চার্ট স্ক্রীনে ভিউএবেল হয়, তখন চার্ট রেন্ডার করা।
3. অটো ডেটা লোডিং: ডেটা না আসা পর্যন্ত চার্ট ডেটার প্লেসহোল্ডার দেখানো।

এই প্রক্রিয়াটি পেজ লোডের সময়ের ওপর বাড়তি চাপ কমায় এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

Chart.js-এ Lazy Loading প্রয়োগ করার পদ্ধতি

১. Lazy Loading Chart.js Data

প্রথমেই, চার্টের ডেটা সার্ভার থেকে asynchronously লোড করা যেতে পারে। এই ক্ষেত্রে ডেটা লোড না হওয়া পর্যন্ত একটি লোডিং স্টেট দেখানো হয় এবং ডেটা আসার পর চার্ট রেন্ডার হয়।

উদাহরণ: Lazy Loading Data with React

React কম্পোনেন্টে Chart.js দিয়ে Lazy Loading ডেটা লোড করার উদাহরণ:

import React, { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

// Register Chart.js components
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

const LazyLoadChart = () => {
    const [chartData, setChartData] = useState(null);
    const [loading, setLoading] = useState(true);

    // Fetch data lazily
    useEffect(() => {
        fetch('https://api.example.com/chart-data') // API Endpoint to fetch chart data
            .then(response => response.json())
            .then(data => {
                setChartData({
                    labels: data.labels,
                    datasets: [{
                        label: 'Sales',
                        data: data.values,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: false,
                    }],
                });
                setLoading(false); // Data loaded, stop loading
            })
            .catch(error => {
                console.error('Error fetching data', error);
                setLoading(false);
            });
    }, []);

    // Render loading state or chart
    return (
        <div>
            {loading ? (
                <p>Loading chart data...</p> // Loading message or spinner
            ) : (
                <Line data={chartData} options={{ responsive: true, scales: { y: { beginAtZero: true } } }} />
            )}
        </div>
    );
};

export default LazyLoadChart;

বিবরণ:

• useEffect: এটি ডেটা লোডের জন্য ব্যবহার করা হয়। এখানে ডেটা সার্ভার থেকে asynchronously লোড হচ্ছে।
• loading: loading স্টেটটি ট্র্যাক করে যাতে ডেটা লোড না হওয়া পর্যন্ত লোডিং স্টেট প্রদর্শিত হয়।
• setChartData: ডেটা লোড হওয়ার পর চার্টের ডেটা স্টেটে সেট করা হয়।

২. Lazy Loading Chart.js Rendering

Chart.js রেন্ডারিং Lazy Load করতে, আপনি intersection observer API ব্যবহার করতে পারেন, যা চার্টটি তখনই রেন্ডার করবে যখন সেটি স্ক্রীনে আসবে।

উদাহরণ: Intersection Observer ব্যবহার করে Lazy Load

import React, { useEffect, useRef, useState } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

// Register Chart.js components
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

const LazyLoadChart = () => {
    const chartRef = useRef(null);
    const [chartData, setChartData] = useState(null);
    const [isVisible, setIsVisible] = useState(false);

    // Fetch chart data on mount
    useEffect(() => {
        fetch('https://api.example.com/chart-data')
            .then(response => response.json())
            .then(data => {
                setChartData({
                    labels: data.labels,
                    datasets: [{
                        label: 'Sales',
                        data: data.values,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: false,
                    }],
                });
            })
            .catch(error => console.error('Error fetching data', error));
    }, []);

    // Intersection Observer for lazy loading the chart
    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            const entry = entries[0];
            if (entry.isIntersecting) {
                setIsVisible(true); // Set to true when chart is in viewport
                observer.disconnect(); // Stop observing after chart is loaded
            }
        }, { threshold: 0.5 });

        if (chartRef.current) {
            observer.observe(chartRef.current);
        }

        return () => {
            if (chartRef.current) {
                observer.disconnect();
            }
        };
    }, []);

    // Render loading state or chart
    return (
        <div>
            {isVisible ? (
                <Line ref={chartRef} data={chartData} options={{ responsive: true, scales: { y: { beginAtZero: true } } }} />
            ) : (
                <p>Chart is loading...</p>
            )}
        </div>
    );
};

export default LazyLoadChart;

বিবরণ:

• IntersectionObserver: এই API ব্যবহার করে আমরা চেক করি যখন চার্টের এলিমেন্ট স্ক্রীনে আসে (viewable), তখনই চার্ট রেন্ডার করা হবে।
• isVisible: যখন চার্ট ভিউপোর্টে আসে, তখন isVisible স্টেটটি true হয়ে যায় এবং Chart.js চার্ট রেন্ডার করা হয়।

৩. Lazy Loading Chart.js CDN ফাইল

এছাড়া আপনি Chart.js লাইব্রেরি Lazy Load করতে CDN ফাইলটি ডাইনামিকভাবে লোড করতে পারেন।

উদাহরণ: CDN এর মাধ্যমে Lazy Loading

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Lazy Load</title>
</head>
<body>
    <div id="chart-container">
        <canvas id="myChart"></canvas>
    </div>
    
    <script>
        let chartLoaded = false;
        
        // Lazy load Chart.js
        const loadChartJs = () => {
            if (!chartLoaded) {
                const script = document.createElement('script');
                script.src = "https://cdn.jsdelivr.net/npm/chart.js";
                script.onload = () => {
                    createChart(); // Create the chart after Chart.js is loaded
                };
                document.head.appendChild(script);
                chartLoaded = true;
            }
        };

        // Create chart after loading Chart.js
        const createChart = () => {
            const ctx = document.getElementById('myChart').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['January', 'February', 'March', 'April'],
                    datasets: [{
                        label: 'Sales',
                        data: [12, 19, 3, 5],
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: false,
                    }],
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        };

        // Trigger lazy load when the chart container comes into view
        window.addEventListener('scroll', () => {
            const chartContainer = document.getElementById('chart-container');
            const rect = chartContainer.getBoundingClientRect();
            if (rect.top <= window.innerHeight && !chartLoaded) {
                loadChartJs(); // Load Chart.js when container is in view
            }
        });
    </script>
</body>
</html>

বিবরণ:

• Lazy Loading of Script: Chart.js লাইব্রেরি CDN স্ক্রিপ্টটি কেবল তখনই লোড হবে যখন ইউজার স্ক্রিনে চার্টের কন্টেইনারে স্ক্রল করবে।
• Event Listener: স্ক্রল ইভেন্ট ব্যবহার করে ইউজার যখন চার্ট কন্টেইনারের কাছাকাছি পৌঁছাবে, তখন চার্ট লোড হবে।

সারাংশ

Chart.js এর মধ্যে Lazy Loading সুবিধা ব্যবহার করে আপনি ডেটা এবং চার্টের রেন্ডারিংকে কেবল তখনই লোড করতে পারেন যখন সেটা প্রয়োজনীয় হয়। এটি ওয়েব পেজের লোড টাইম কমাতে এবং পারফরম্যান্স উন্নত করতে সহায়ক। React, Angular, Vue.js-এর মতো ফ্রেমওয়ার্কের মাধ্যমে সহজেই এই প্রক্রিয়া বাস্তবায়ন করা যায় এবং ইউজারের জন্য আরো ভালো অভিজ্ঞতা প্রদান করা সম্ভব।